$(function () {

  /**
   * 做一下说明：
   * 
   * 将最外层的div变成了section标签，
   * 还将里面的id变了一下，里面的轮播图片img删除了，向包裹轮播图片的div上面增加了data-*属性，用于获取对应宽度时的对应图片；
   * 
   * 轮播思路：
   *    ! 如果窗口宽度大于900px，那就 清空 包裹轮播图片div中的 img标签，而让一张大图片作为div的 背景图片；
   *    ! 如果窗口宽度小于等于900px，那就让轮播图片div中 具有img标签，而让一张 小图片 url作为img标签的src，这两张图片是类似的，只是大小不同；
   *    ? (也就是说，一个图片需要两套图片模板，一个大图，一个小图，这样在大屏时)
   * 
   *    ! 背景图片background-img不会因为响应式整体缩小，而是只横向缩小宽度，高度不变
   *    ! img标签，会跟者响应式进行等比例缩小，宽度高度全都会一起缩小
   * 
   *    通过判断窗口宽度大小来决定使用哪种方式，当窗口宽度变化的时候就会执行$(window).on("resize", () =>{})，
   * 我们第一次进入html页面的时候需要调用触发一下窗口宽度改变的事件，用以决定展示背景或者图片，
   * 这也就是$(window).trigger("resize")存在的原因，至于如何设置展示标签还是图片我们在下面的js代码中说的很清楚，我需要解释一点，
   * 那就是为什么要在html代码中的包裹图片的div中添加data-*属性，当我们确定了窗口宽度的时候，
   * 已经决定了是把大图片当做div背景图片还是往div里面放置img标签，但是我们没有url，如果在js代码中写url的话，那太麻烦了，
   * 所以我们把大图片和小图片url当做属性放在div中，取出的时候可以使用data()方法去取出
   * 
   * 移动端手指滑动：
   *    我们都很熟悉移动端轮播图滑动的方式，我们的思路是通过判断鼠标开始点击位置和鼠标松开位置的关系来决定是否轮播，以及往哪个方向轮播，
   * 是否轮播是通过鼠标开始点击位置的X轴坐标和鼠标松开位置的X轴坐标比较，之后得到距离绝对值，通过比较距离绝对值和最小移动许可距离，
   * 决定是否轮播，如果距离绝对值大于最小移动许可距离，那就说明可以轮播，相反不可以轮播，至于往哪个方向轮播，
   * 就需要判断鼠标开始点击位置的X轴坐标和鼠标松开位置的X轴坐标，如果前者大于后者，那就是往左边轮播，反之往右边轮播
   * 
   */

  // ******************轮播图js代码开始*************************************
  // 当窗口大小改变的时候，改变轮播
  $(window).on("resize", () => {
    // 1.获得当前窗口的宽度
    let clientW = $(window).width();

    // 2、设置临界值，判断当前窗口是否大于900px
    let isShowBigImage = clientW >= 900;

    // 3、获取所有轮播图div 获取到当前轮播图里的所有轮播div
    let $allItems = $("#web-carousel .carousel-item");
    // console.log($allItems[0])

    // 4、遍历所有的轮播图div
    //(index, item) => 和function(index, item)是一致的,这种函数叫做箭头函数
    // ! (index, item) 不能因为没用到index就不写，不写index就会出错，但是不会报错
    $allItems.each((index, item) => {
      // 4.1、取出图片的路径，如果窗口大于900px，取出大图url，否则取出小图url
      // item相当于this，它是一个js数组对象，如果想使用data()方法，那就需要把它转换成jquery对象 $(item)，
      // ! data()方法用于取出前面html文档中的以data-开头的数据
      // ! 注意，html中的是 data-lg-img="地址" 但是这里要用 data('lg-img') ，不用再写上data-了
      let src = isShowBigImage ? $(item).data('lg-img') : $(item).data('sm-img');
      // 如果isShowBigImage是true，说明当前窗口大于等于900px；否则当前窗口小于900px
      if (isShowBigImage) {
        // 如果是大屏幕，所以将图片设置为div的background-img,所以就不需要img标签了
        // 通过.empty()清空当前div里的所有img标签子项
        $(item).empty();
        // 获得大图地址
        let imgUrl = `url(${src})`;
        // 向当前选中的div添加背景图片
        $(item).css({
          "background-image": imgUrl
          //? backgroundImage: imgUrl  效果一样
        });
      } else {  //如果是小屏幕，则使用小图片，作为img标签插入当前div中去
        let imgEle = `<img src="${src}" />`;
        // 如果是小屏幕，就先清除img标签，在往里面添加
        $(item).empty().append(imgEle);
      }
    })

  });

  // // 首次加载首页就触发resize事件，让在第一次进入首页的时候轮播div就会根据屏幕大小展示相应的图片或者背景图片
  // $(window).trigger("resize");

  // ***************下面的代码实现移动端轮播图手指滑动效果**************************
  // ! 只有在移动端中才能运行下面的代码
  // 鼠标初始点击位置，鼠标最终松开位置，在下面已经说明了不设置两个变量初始值的原因
  let startX, endX;
  // 最小移动许可距离，超过这个距离代表用户想移动轮播图
  let offset = 50;

  // 获得鼠标移动位置的div
  let $cjCarousel = $("#web-carousel");
  let cjCarousel = $cjCarousel[0];

  // 鼠标开始点击事件
  cjCarousel.addEventListener("touchstart", (e) => {
    // 获取鼠标初次点击的位置
    startX = e.targetTouches[0].clientX;
  })

  // 移动鼠标事件，如果用户没有移动位置，那该事件不会触发
  cjCarousel.addEventListener("touchmove", (e) => {
    // 获得鼠标中间移动的位置，当鼠标停止的时候，这个值就是鼠标最终停止点击的位置，由于touchend事件中无法使用，所以在这个地方使用，效果相同
    endX = e.targetTouches[0].clientX;
  })

  // 鼠标停止点击事件
  cjCarousel.addEventListener("touchend", (e) => {
    // 当我们在最开始设置startX和endX是0的时候，如果用户没有触发鼠标移动事件，那endX是等于0的，但是其实endX是等于startX的，可以使用代码：“endX = (endX == 0 ? startX : endX);”解决这个问题，如果我们不设置startX和endX的初始值，那不移动鼠标的时候endX初始值是undefined，那么distance的值是NaN，当为NaN的distance和offset比较的时候，结果是false，所以不设置startX和endX是最好的方法

    // 判断用户鼠标移动的距离
    var distance = Math.abs(startX - endX);

    // 如果用户鼠标移动的距离大于我们设定的最小移动距离，那就让用户移动
    if (distance > offset) {
      // 不能使用$(this)，因为会出现问题的，当我打印this的时候，发现出现的是：HTMLDocument，如果想了解更多HTMLDocument的信息，请看：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLDocument
      $cjCarousel.carousel(startX > endX ? 'next' : 'prev');
    }
  })


  //  * 以下的代码可以代替上面的代码相应代码
  // let startX,
  //   endX;
  // let offset = 50;

  // // let $carousel = $(".carousel"); 等价于底下这行
  // let $carousel = $("#web-carousel");
  // $carousel.on("touchstart", (e) => {
  //   startX = e.originalEvent.touches[0].clientX;
  // })

  // $carousel.on("touchmove", (e) => {
  //   endX = e.originalEvent.touches[0].clientX;
  // })

  // $carousel.on("touchend", (e) => {
  //   var distance = Math.abs(startX - endX);
  //   if (distance > offset) {
  //     // 如果使用this的话，控制台会出现错误：Uncaught TypeError: this.carousel is not a function，但是效果是正确的
  //     $carousel.carousel(startX > endX ? 'next' : 'prev');
  //   }
  // })


  // ***********************轮播图js代码结束************************************

  // ***********************提示冒泡(Tooltip)js代码************************************
  // 最下方微信和微博图标的提示框
  // 'enable' 这是默认的，可以不写
  $('[data-toggle="tooltip"]').tooltip('enable');
  // ***********************提示冒泡(Tooltip)js代码结束************************************

  //  ***********************超过宽度加上滚动条************************************
  // 对“产品中心”中的标题超出内容处理，让超过的话加上滚动条

  $(window).on("resize", () => {

    // 获取包含所有产品名称的div内容
    let $containerDiv = $("#productTab");
    // 在这个div的范围之下寻找class为nav-item的a标签列表，也就是该div下所有的a标签
    let $allAtag = $(".nav-item", $containerDiv);
    // 所有a标签的宽度
    let totalW = 0;
    // 遍历所有a标签，计算所有a的宽度
    $allAtag.each((index, item) => {
      totalW += $(item).width();
    })
    // 获取包含所有产品名称的div  因为只有这种能使用.width()来获取元素宽度
    let divW = $containerDiv.width();
    // console.log($containerDiv.width())
    // 如果div的总宽度小于所有a标签的总宽度，那就把div的宽度设置成所有a标签的总宽度，反之还用div自己的总宽度 
    $containerDiv.width(divW < totalW ? totalW : divW);

  });

  // 首次加载首页就触发resize事件，让在第一次进入首页的时候就对“产品中心”中的标题超出内容处理 轮播div就会根据屏幕大小展示相应的图片或者背景图片
  $(window).trigger("resize");

});